<script setup>
import useLogin from "./login"; // 登录验证
import useReset from "./reset"; // 重置按钮
import useSubmit from "./submit"; // 登录按钮

let { formSize, rules } = useLogin();
let { resetForm } = useReset();
let { submitForm, ruleFormRef, ruleForm } = useSubmit({
  fromRef: "ruleFormRef",
});
</script>


<template>
  <div class="login">
    <!-- 图片 -->
    <div class="box-img">
      <img src="@/assets/logo.png" />
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="ruleForm.password" />
      </el-form-item>

      <el-form-item class="item-btn">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 -->
  </div>
</template>


<style lang="scss" scoped>
.login {
  position: relative;
  background: #2b4b6b;
  width: 100vw;
  height: 100vh;
}

.box-img {
  height: 150px;
  width: 150px;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 50%;
  padding: 12px;
  margin: auto;
  z-index: 2;
  border: 1px solid #ddd;
  margin-top: 190px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ddd;
  }
}

.demo-ruleForm {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20px;
  padding-top: 6%;
  border-radius: 14px;
  box-sizing: border-box;
  margin: auto;
  margin-top: 270px;
}

.item-btn {
  float: right;
}
</style>